<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Captcha Example</title>

</head>
<body style="text-align: center">
<!-- 用户输入验证码的文本框 -->
<input type="text" name="captcha" id="captcha" style="width: 160px;height: 40px"/>
<!-- 显示验证码图像 -->
<a href="#" onclick="refreshCaptcha(); return false;">
    <img src="/web/captcha" id="captchaImage" alt="Captcha" />
</a>
<!-- 用户点击后刷新验证码的链接 -->
<a href="#" onclick="refreshCaptcha(); return false;">换一换</a><br>
<span id="error" style="color: red"></span><br>
<input type="button" value="提交" id="btn">
<script type="text/javascript">
    // 当用户点击“换一换”链接时，调用此函数以刷新验证码图像
    function refreshCaptcha() {
        var captchaImage = document.getElementById('captchaImage');
        // 更新图像的src属性，因为是get请求，所以要在后面添加一个时间戳以防止浏览器缓存图像
        captchaImage.src = '/web/captcha?' + new Date().getTime();
    }

    //输入框获得焦点时擦除错误信息
    document.getElementById('captcha').onclick=function (){
        document.getElementById("error").innerHTML="";
    }

    //点击提交时检查验证码
    document.getElementById('btn').onclick=function (){
        const captcha = document.getElementById('captcha').value.trim();//获得用户输入值
        if (captcha===""){//用户输入为空时提示错误信息
            document.getElementById("error").innerHTML='请输入验证码';
        }else {//用户输入格式正确则发送ajax请求
            fetch('/web/captcha', {
                method: 'POST', // 使用 POST 方法提交数据
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded' // 指定请求的内容类型
                },
                body: 'captcha='+ captcha  //键=值格式
            })
                .then(response => response.json()) // 解析文本响应
                .then(data => {
                    console.log(data)
                    if (data==="success") {
                        alert('验证成功')
                    } else {
                        refreshCaptcha();
                        document.getElementById("error").innerHTML='验证码错误，请重新输入';
                    }
                })
                .catch(error => console.error('Error： ', error));
        }


    }


</script>
</body>
</html>